<template>
  <div class="login">
    <MMnavbar></MMnavbar>
    <div class="t1">你好，请登录</div>
    <van-form class="form" ref="form" @submit="onSubmit">
      <!-- 引入 -->
      <van-row>
        <van-col>
          <!-- 密码和用户 -->
          <van-field
            v-model="mobile"
            name="mobile"
            type="tel"
            placeholder="请输入手机号"
            :rules="[
              {
                required: true,
                message: '手机号不能为空',
                pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              }
            ]"
          >
            <template #left-icon>
              <i class="iconfont iconbianzu1"></i>
            </template>
          </van-field>
        </van-col>
      </van-row>
      <van-row>
        <van-col :span="16">
          <van-field
            v-model="code"
            center
            clearable
            type="number"
            name="code"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请输入验证码' }]"
          >
            <template #left-icon>
              <i class="iconfont iconyanzhengma"></i>
            </template>
          </van-field>
        </van-col>
        <van-col :span="8" class="btncol">
          <span @click="getcode" type="default" class="btn">{{ btntext }}</span>
        </van-col>
      </van-row>
      <p class="logintext">
        登录即同意<a>《用户使用协议》</a>和<a>《隐私协议》</a>
      </p>
      <van-button class="btnsubmit" size="large" round type="danger"
        >确认</van-button
      >
    </van-form>
  </div>
</template>

<script>
import { sendlogin, submitdata } from '@/api/login.js'
import { saveToken } from '@/utils/local.js'
import { mapMutations } from 'vuex'
// import MMnavbar from '@/components/MMnavbar.vue'
export default {
  name: 'login',
  // components: {
  //   MMnavbar
  // },
  data () {
    return {
      mobile: '',
      code: '',
      btntext: '获取验证码',
      delay: 0
    }
  },

  methods: {
    ...mapMutations(['SETUSERINFO', 'SETLOGIN']),
    // 退出
    // onClickLeft () {
    //   // 是否为打回来的页面，
    //   // 有，返回发现页，无，返回上一页-1
    //   if (this.$route.query.redirect) {
    //     // 未登录去发现页
    //     this.$router.replace('/find')
    //   } else {
    //     this.$router.go(-1)
    //   }
    // },
    // 发送验证码,验证手机号
    getcode () {
      // 限制点击
      if (this.delay !== 0) {
        return
      }
      this.$refs.form
        .validate('mobile')
        .then(() => {
          this.$toast.loading({ duration: 0 })
          // vue修改数据的方式和不用dom
          // 先设定30秒
          this.delay = 30
          // 开启定时器，自减一秒
          const interId = setInterval(() => {
            this.delay--
            // 按钮内容跟随改变
            this.btntext = `${this.delay}s后重试`
            // 清理定时器
            if (this.delay === 0) {
              clearInterval(interId)
              // 倒计时完成恢复获取验证码
              this.btntext = '获取验证码'
            }
          }, 100)
          // 请求
          sendlogin({ mobile: this.mobile }).then(res => {
            window.console.log(res)
            this.$toast.success(res.data)
          })
        })
        .catch(err => {
          window.console.log('err:', err)
          // 写上就看不到错误提示
        })
    },
    // 提交
    onSubmit (value) {
      // 验证成功，加载提示
      this.$toast.loading({ duration: 0 })
      // { mobile: this.mobile, code: this.code }
      submitdata(value)
        .then(res => {
          window.console.log(res)
          this.$toast.success('welcome')
          // 保存token
          saveToken(res.data.jwt)
          // 保存用户信息
          res.data.user.avatar = process.env.VUE_APP_URL + res.data.user.avatar
          // 调用mutationde 方法,保存信息
          // this.$store.commit('SETUSERINFO', res.data.user)
          this.SETUSERINFO(res.data.user)
          this.SETLOGIN(true)
          // 页面跳转
          // 限制上一页和下一页
          // 当前路由信息存在上一步，就跳转到上一个网页

          if (this.$route.query.redirect) {
            // 直接跳转 this.$router.push('/my')
            this.$router.push(`${this.$route.query.redirect}`)
          } else {
            // 不存在，就跳转到find页
            this.$router.push('/Find')
          }
        })
        .catch(err => {
          window.console.log(err)
          // 提示
          this.$toast.fail(err.message)
        })
    }
  }
}
</script>

<style lang="less">
.login {
  width: 100%;
  margin-top: 44px;
  background-color: @white-color;
  .t1 {
    font-size: 22px;
    font-family: PingFangSC, PingFangSC-Semibold;
    text-align: left;
    color: #222222;
    margin: 50px 10px;
  }
  .form {
    padding: 15px;
    .van-field {
      .iconfont {
        font-size: 16px;
      }
    }
    .logintext {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #181a39;
      a {
        color: @assist-color;
        &:after {
          color: @main-color;
        }
      }
    }
    .btn {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #00b8d4;
      border-left: 1px solid grey;
    }
    .btnsubmit {
      border-radius: 20px;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: center;
      background-color: @main-color;
    }
  }
}
</style>
